<template>
	<view>
		<view class="pickerbox">
			<picker mode="selector" @change="ColumnChange" :value="index1" :range="list">
				<view class="picker">
				 {{list[index1]}}<text class="lg text-gray cuIcon-triangledownfill"></text>
				</view>
			</picker>
			<picker mode="selector" @change="ColumnChange2" :value="index2" :range="list2">
				<view class="picker">
				  {{list2[index2]}}<text class="lg text-gray cuIcon-triangledownfill"></text>
				</view>
			</picker>
		</view>
		<view>
			<Rank-Item :type='list[index1]' :list="items"></Rank-Item>
		</view>
	</view>
</template>

<script>
	const db=wx.cloud.database()
	const _=db.command
	export default {
		data() {
			return {
				list:[
					'CPU',
					'显卡'
				],
				list2:['全部','Intel','AMD'],
				collectionname:'cpu_rank',
				index1:0,
				index2:0,
				
				items:[]
			};
		},
		onLoad() {
			this.getrank()
		},
		methods:{
			ColumnChange(evt){
				if(evt.detail.value==0){
					this.list2=['全部','Intel','AMD']
					this.collectionname='cpu_rank'
				}else{
					this.list2=['全部','NVIDIA','AMD']
					this.collectionname='xianka_rank'
				}
				if(this.index1==evt.detail.value){
					return;
				}
				this.index1=evt.detail.value
				this.index2=0
				this.getrank()
			},
			ColumnChange2(evt){
				if(this.index2==evt.detail.value){
					return;
				}
				this.index2=evt.detail.value
				this.getrank()
			},
			getrank(){
				if(this.list2[this.index2]=='全部'){
					db.collection(this.collectionname).get().then(res=>{
						this.items=res.data
						console.log(this.items)
					})
				}else{
					db.collection(this.collectionname).where({
						brand:this.list2[this.index2]
					}).get().then(res=>{
						this.items=res.data
						console.log(this.items)
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
.pickerbox{
	height: 7vh;
	background-color: white;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;

}
</style>
